<template>
	<view class="phdetail">
		<Hearder :name="'订单详情'"></Hearder>
		<view class="content" v-if="JSON.stringify(detail) !='{}'">
			<view class="wuliuinfo">
				<view class="status">{{detail.pay_status}}</view>
				<view class="statuspanduan" v-if="status=='forwarding'">您的商品正在备货中，请等待....</view>
				<view class="statuspanduan" v-if="status=='received'">物流单号：{{detail.express_no}}</view>
				<view class="statuspanduan" v-if="status=='payment'">{{detail.order_title1}}</view>
				<view class="statuspanduan" v-if="status=='payment'" style="margin-top: 6rpx;">{{detail.order_title2}}</view>
			</view>
			<view style="margin: 0 3%;">
				<view class="first-box">
					<view class="shouhuoinfo">
						<view class="bigtitle">收货信息</view>
						<view>
							<text>{{detail.address.name}}</text>
							<text class="phone">{{detail.address.phone}}</text>
						</view>
						<view>{{detail.address.region.province}}{{detail.address.region.city}}{{detail.address.region.region}}{{detail.address.detail}}</view>
					</view>
					<view class="shoppinginfo">
						<view class="bigtitle">商品信息</view>
						<view class="order_list">
							<view style="margin: 10rpx 0 20rpx;">
								<view class="detail_con clearfix" v-for="item in detail.goods" :key="item.goods_id">
									<image :src="item.goods_image"></image>
									<view class="detail_right">
										<view class="box_top">
											<view class="title">{{item.goods_name}}</view>
											<view class="shop_sku" v-if="item.goods_attr">{{item.goods_attr}}</view>
										</view>
										<view class="box_bottom">
											<view v-if="detail.order_type==1">￥{{item.goods_price}}</view>
											<view v-if="detail.order_type==2">{{item.goods_price}}积分</view>
											<view>X{{item.total_num}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="total">
								<view>商品总价</view>
								<view>
									<text v-if="detail.order_type==1">￥{{detail.total_price}}</text>
									<text v-if="detail.order_type==2">{{detail.total_price}}积分</text>
								</view>
							</view>
							<view class="shiji">
								<view>实付款</view>
								<view>
									<text v-if="detail.order_type==1">￥{{detail.pay_price}}</text>
									<text v-if="detail.order_type==2">{{detail.pay_price}}积分</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bigorderinfo">
					<view class="bigtitle">订单信息</view>
					<view class="detail_order">
						<view class="detail_list">
							<view>订单编号</view>
							<view>{{detail.order_no}}</view>
						</view>
						<view class="detail_list">
							<view>创建时间</view>
							<view>{{detail.create_time}}</view>
						</view>
						<view class="detail_list" v-if="detail.pay_time!=0">
							<view>付款时间</view>
							<view>{{detail.pay_time}}</view>
						</view>
						<view class="detail_list" v-if="status!='payment'">
							<view>支付方式</view>
							<view>{{detail.pay_type}}</view>
						</view>
						<view class="detail_list" v-if="status!='payment'">
							<view>订单状态</view>
							<view class="dshouhuo">已支付</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="placeorder_bot clearfix">
			<view class="last_btn" v-if="status=='payment'" @click="$u.throttle(paymoney(detail.order_id,detail.pay_type), 1000)">去支付</view>
			<view class="last_btn" v-if="status=='forwarding'" @click="remind(detail.order_id)">提醒发货</view>
			<view class="morebeyond" v-if="status=='payment' || status=='payment'" @click="quxiao(detail.order_id)">取消订单</view>
			<view class="last_btn" v-if="status=='received'" @click="receipt(detail.order_id)">确认收货</view>
			<view class="morebeyond" v-if="status=='received'" @click="toPage('wuliu?id='+detail.order_id)">查看物流</view>
			<view class="morebeyond" v-if="status=='completed'" @click="delorder(detail.order_id)">删除订单</view>
		</view>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				order_id:'',
				detail:{},
				status:'payment',
				showLogin:false
			}
		},
		onLoad(options) {
			this.order_id = options.order_id || this.$route.query.order_id
			this.status = options.status || this.$route.query.status
			this.request('/order/detail',{order_id:this.order_id,dataType:this.status}).then(res => {
				if(res.data.code==-500){
					this.showLogin=true
				}
				if(res.data.code==1){
					this.detail=res.data.data.order
				}
			})
		},
		methods:{
			remind(order_id){
				this.request('/order/toRemindDeliver',{order_id:order_id}).then(res => {
					this.$tip(res.data.msg)
				})
			},
			quxiao(order_id){
				this.request('/order/cancel',{order_id:order_id}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			delorder(order_id){
				//增加删除提示框
				var that = this;
				uni.showModal({
				    title: '删除提示',
				    content: '确认删除这个订单吗？',
				    success: function (res) {
				        if (res.confirm) {
				           that.request('/order/removeOrder',{order_id:order_id}).then(res => {
				           	if(res.data.code==1){
				           		that.$tip(res.data.msg)
				           		setTimeout(()=>{
				           			uni.navigateBack()
				           		},500)
				           	}else{
				           		that.$tip(res.data.msg)
				           	}
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			receipt(order_id){
				this.request('/order/receipt',{order_id:order_id}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			paymoney(order_id,pay_type){
				this.request('/order/toPayGoods',{order_id:order_id,pay_type:pay_type}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			loginhidden(data){
				this.showLogin=data
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phdetail{
		min-height: 100%;
		background: #F8F8F8;
		/deep/ .head{
			background: $uni-item-color;
			text{
				color: #fff;
			}
		}
		.content{
			padding-bottom: 150rpx;
			.wuliuinfo{
				overflow: hidden;
				height: 220rpx;
				background: $uni-item-color;
				padding: 30rpx 3%;
				view{
					color: #fff;
				}
				.status{
					font-size: 36rpx;
					font-weight: 800;
					margin-top: 40rpx;
				}
				.statuspanduan{
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
			.bigtitle{
				font-weight: 800;
				padding: 44rpx 3% 0;
			}
			.first-box,
			.bigorderinfo{
				background: #fff;
				border-radius: 30rpx;
				padding-bottom: 20rpx;
				margin-top: 20rpx;
			}
			.first-box{
				margin-top: -40rpx;
			}
			.shouhuoinfo{
				padding: 0 3% 30rpx;
				border-bottom: $uni-border-bottom;
				.bigtitle{
					padding-left: 0;
				}
				view{
					&:nth-of-type(2){
						margin: 30rpx 0 14rpx;
						text{
							font-size: 26rpx;
						}
					}
					&:nth-of-type(3){
						font-size: 26rpx;
					}
				}
				.phone{
					margin-left: 86rpx;
				}
			}
			.shoppinginfo{
				.order_list{
					.detail_con{
						height: 188rpx;
						padding: 20rpx;
						box-sizing: content-box;
						>image{
							float: left;
							width: 188rpx;
							height: 100%;
							border-radius: 10rpx;
						}
						.detail_right{
							float: left;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: calc(100% - 208rpx);
							height: 188rpx;
							margin-left: 20rpx;
							.box_top{
								.title{
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp:2;
									/*! autoprefixer: off */
									-webkit-box-orient: vertical;
									/* autoprefixer: on */
									font-size: 26rpx;
									line-height: 39rpx;
								}
								.shop_sku{
									line-height: 28rpx;
									margin-top: 10rpx;
									color: #999;
									font-size: 24rpx;
								}
							}
							.box_bottom{
								display: flex;
								justify-content: space-between;
								align-items: center;
								view{
									font-size: 26rpx;
									font-weight: 800;
									&:first-of-type{
										color: $uni-text-color;
										font-size: 30rpx;
									}
								}
							}
						}
					}
					.total,.shiji{
						margin: 0 3% 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							font-size: 24rpx;
							color: #999;
						}
					}
					.total{
						view{
							font-size: 24rpx;
							color: #999;
						}
					}
					.shiji{
						view{
							font-size: 28rpx;
							text{
								color: $uni-text-color;
								font-weight: 800;
								font-size: 30rpx;
							}
						}
					}
				}
			}
			.bigorderinfo{
				.detail_order{
					margin: 40rpx 3% 0;
					.detail_list{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 30rpx;
						view{
							font-size: 28rpx;
						}
						.dshouhuo{
							color: $uni-text-color;
						}
					}
				}
			}
		}
		.placeorder_bot{
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #fff;
			height: 110rpx;
			box-sizing: border-box;
			padding: 0 3%;
			border-top: $uni-border-bottom;
			>view{
				float: right;
				width: 200rpx;
				height: 80rpx;
				box-sizing: border-box;
				border-radius: 100rpx;
				text-align: center;
				line-height: 80rpx;
				margin: 15rpx 0 0 20rpx;
				&.morebeyond{
					border: 1rpx solid #999;
					color: #999;
				}
				&.last_btn{
					background: $uni-item-color;
					color: #fff;
				}
			}
		}
	}
</style>
